import React, { useEffect, useState } from 'react';
import { Row, Col, Tag, notification } from 'antd';
import "./ServiceRecord.scss"
import Index from '../../../../../api/Inedx';
import { NavLink, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { resolve } from 'path';
interface Props {
    residentId: any,
}



function ServiceRecord(props: Props) {
    let residentId = useSelector((state: any) => { return state.WTreducer.residentId })
    let residentDetail = useSelector((state: any) => { return state.WTreducer })
    let navigate = useNavigate()
    let [serviceRecord, setServiceRecord]: any = useState([])
    let [doctor, setDoctor]: any = useState([])
    let [optionlist, setOptionlist]: any = useState([])
    let [teamlist, setTeamlist]: any = useState([])
    // console.log(residentId);


    let getAllOverServer = async () => {
        let res = await Index.Resident.getAllOverServer()

        let arr = res.data.data.map((item: any, index: any) => {
            return (
                { ...item[0], ...item[1], ...item[2] }
            )
        })
        console.log(arr);
        let arr2 = arr.filter((item: any) => {
            return (item.residentId == residentId)
        })
        if (arr2[0]) {
            setServiceRecord(arr2[0])
        } else {
            notification.error({ message: "查询失败!" })
        }

    }
    let getDoctor = async () => {
        let res = await Index.Resident.getDoctorList()
        console.log(res);
        setDoctor(res.data.data)
    }
    let getOptionlist = async () => {
        let res = await Index.Resident.optionlist()
        console.log(res);
        setOptionlist(res.data.data)
    }
    let getTeamlist = async () => {
        let res = await Index.Resident.teamlist()
        console.log(res);
        setTeamlist(res.data.data)
    }
    useEffect(() => {
        getAllOverServer()
        getDoctor()
        getTeamlist()
        getOptionlist()
    }, [])
    let packAge = (Id: any) => {
        switch (Id) {
            case 1:
                return (<Tag color="geekblue">基础包</Tag>)
                break;
            case 2:
                return (<Tag color="red">老年人基础包</Tag>)
                break;
            case 3:
                return (<Tag color="orange">慢性病基础包</Tag>)
                break;
            default:
                break;
        }
    }
    let Status = (Id: any) => {
        switch (Id) {
            case 1:
                return (<Tag color="geekblue">待审核</Tag>)
                break;
            case 2:
                return (<Tag color="red">待服务</Tag>)
                break;
            case 3:
                return (<Tag color="orange">已驳回</Tag>)
                break;
            case 4:
                return (<Tag color="orange">已完成</Tag>)
                break;
            case 5:
                return (<Tag color="orange">已取消</Tag>)
                break;
            default:
                break;
        }
    }

    return (
        <div className='servicerecord'>
            <div className='card'>
                <span className='state'>{Status(serviceRecord.serviceStatus)}</span>
                <div>
                    <span className='title6'>服务信息</span><NavLink to={"/index/serve-edit"} state={residentDetail}>编辑</NavLink>
                    <Row gutter={[16, 16]} className="row">
                        <Col className="gutter-row" span={8}>
                            <div>服务编号{serviceRecord.serviceId}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>服务状态{Status(serviceRecord.serviceStatus)}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>服务机构{serviceRecord.mechanismId}</div>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]} className="row">
                        <Col className="gutter-row" span={8}>
                            <div>服务团队{serviceRecord.teamId}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            {/* <div>服务医生{doctorTag(serviceRecord.doctorId, doctor)}</div> */}
                            <div>服务医生{serviceRecord.doctorId}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>服务包{packAge(serviceRecord.packageId)}</div>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]} className="row">
                        <Col className="gutter-row" span={8}>
                            <div>服务项目{serviceRecord.projectId}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>服务地点{serviceRecord.servicePlace}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>服务来源{serviceRecord.serviceSource}</div>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]} className="row">
                        <Col className="gutter-row" span={8}>
                            <div>提交时间{serviceRecord.serviceSubmit}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>审核时间{serviceRecord.serviceExamine}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>审核人{serviceRecord.serviceExaminePeople}</div>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]} className="row">
                        <Col className="gutter-row" span={8}>
                            <div>服务时间{serviceRecord.serviceAppointment}</div>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <div>服务备注{serviceRecord.serviceDesc}</div>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
    );
}

export default ServiceRecord;